<template>
    <div>
        <van-tabs v-model="active" line-height="0.04rem" line-width="0.4rem" title-active-color="#000000">
            <van-tab title="频道" title-class="tit">
                <slot name="pindao"></slot><!--槽口，此处槽口将与使用的时候的slot一致，无name将是默认，届时无slot的加到此处-->
            </van-tab>
            <van-tab title="分区" title-class="tit">
                <slot name="fenqu"></slot>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                active: 1,
            };
        },
    };
</script>

<style lang="scss">

    .van-tabs--line .van-tabs__wrap{
        height: 0.58rem;
        border-top: 0.01rem solid #f8f9fa;
        border-bottom: 0.02rem solid #e5e5e5;
        position: sticky;
        top: 0;
        margin-top: -0.58rem;
        z-index: 2;
    }
    .van-tabs__line{
        background-color: #000000;
        border: 0.01rem solid #636363;
    }
    .van-tab__text--ellipsis{
        height: 100%;
        line-height: 0.58rem;
    }
    .nav {
        height: 0.6rem;
        border-bottom: 2px solid #e5e5e5;
    }

    .tit {
        font-size: 0.16rem;
        color: #8a8a8a;
    }
</style>